<script setup lang="ts">
import type {
  ProblemSubmitVo,
  RPageSafeProblemVo,
  ProblemSubmitQueryRequest,
  ProblemQueryRequest,
} from '../../../generated'
import {
  ProblemControllerService,
  ProblemVo,
  PageProblemVo,
} from '../../../generated'

import { ElInput, ElTable } from 'element-plus'
import moment from 'moment'
import { ref } from 'vue'

const formatNumber = (src: number, pos: number) => {
  const data = Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos)
  return data.toFixed(2)
}

// 是否正在加载中
const loading = ref<boolean>(true)
//  表格数据
let tableData = ref([])

let searchParams = reactive({
  id: 0,
  tags: [],
  difficulty: '',
  pageSize: 8,
  pageNum: 1,
  title: '',
  sortField: 'create_time',
  sortOrder: 'descend',
})

//  表格的分页数据
const total = ref<number>(5)

const types = ['success', 'info', 'danger']
const loadData = async () => {
  loading.value = true
  const res = await ProblemControllerService.listProblemVoByAdmin(searchParams)
  console.log('res', res)
  if (res.code === 200) {
    tableData.value = res.data.records
    searchParams.pageNum = res.data?.current as number
    searchParams.pageSize = res.data?.size as number
    total.value = res.data?.total as number
  } else {
    tableData.value = []
  }
  loading.value = false
}

onMounted(() => {
  loadData()
})
const doSubmit = () => {
  // 这里需要重置搜索页号
  searchParams = {
    ...searchParams,
    pageNum: 1,
  }

  console.log(searchParams)

  loadData()
}

const handleCurrentChange = (val: number) => {
  searchParams.pageNum = val
  loadData()
}

// const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const multipleSelection = ref<ProblemVo[]>([])
const handleSelectionChange = (val: ProblemVo[]) => {
  multipleSelection.value = val
  console.log(multipleSelection)
}

const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    searchParams.tags?.push(inputValue.value)
  }
  console.log(inputVisible.value)
  console.log(inputValue.value)
  console.log(searchParams.tags)
  inputVisible.value = false
  inputValue.value = ''
}
const handleClose = (tag: string) => {
  console.log(tag)
  console.log(searchParams.tags)
  // form.value.tags.splice(form.value.tags.indexOf(tag), 1)
}

const router = useRouter()
/**
 * 跳转到做题页面
 * @param problemVo
 */
const toQuestionPage = (problemVo: ProblemVo) => {
  console.log('进行了跳转' + problemVo)
  router.push({
    path: `/home/problemSubmit/${problemVo.id}`,
  })
}

const radioChange = (val: string) => {
  console.log(val)
  searchParams.difficulty = val
}
</script>

<template>
  <div class="app-container">
    <el-card class="table-main" v-loading="loading">
      <el-form class="search-form" :model="searchParams">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="题目">
              <el-input v-model="searchParams.title" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="题目难度">
              <el-radio-group
                v-model="searchParams.difficulty"
                @change="radioChange"
              >
                <!--            <el-option label="" value="">请选择难度</el-option>-->
                <!--            <el-radio label="简单" border></el-radio>-->
                <el-radio label="" border>全部</el-radio>
                <el-radio label="简单" border>简单</el-radio>
                <el-radio label="中等" border>中等</el-radio>
                <el-radio label="困难" border>困难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button type="primary" @click="doSubmit">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!--          <el-select v-model="searchParams.difficulty" placeholder="请选择难度">-->
        <!--            <el-option label="请选择难度" value=""></el-option>-->
        <!--            <el-option label="简单" value="简单"></el-option>-->
        <!--            <el-option label="中等" value="中等"></el-option>-->
        <!--            <el-option label="困难" value="困难"></el-option>-->
        <!--          </el-select>-->

        <el-form-item label="标签" class="form-tag">
          <el-tag
            v-for="tag in searchParams.tags"
            :key="tag"
            class="tag"
            @close="handleClose(tag)"
            placeholder="请选择标签"
          >
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="ml-1 w-20 inputVisible"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button
            v-else
            class="button-new-tag ml-1"
            size="small"
            @click="showInput"
          >
            + 新增
          </el-button>
        </el-form-item>
      </el-form>
      <el-divider size="0" />

      <div class="table-wrapper">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column prop="id" label="题号" width="100" align="center" />
          <el-table-column prop="title" label="题目名称" align="center" />
          <el-table-column prop="difficult" label="题目难度" align="center">
            <template #default="scope">
              <el-tag
                v-if="scope.row.difficulty === '简单'"
                type="success"
                effect="dark"
                >{{ scope.row.difficulty }}
              </el-tag>
              <el-tag
                v-else-if="scope.row.difficulty === '中等'"
                type="info"
                effect="dark"
              >
                {{ scope.row.difficulty }}
              </el-tag>
              <el-tag v-else type="danger" effect="dark"
                >{{ scope.row.difficulty }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column label="通过率" align="center">
            <template #default="scope">
              {{
                `${
                  scope.row.submitNum
                    ? formatNumber(
                        scope.row.acceptedNum / scope.row.submitNum,
                        2,
                      )
                    : '0'
                }% (${scope.row.acceptedNum}/${scope.row.submitNum})`
              }}
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间">
            <template #default="scope">
              {{ moment(scope.row.createTime).format('YYYY-MM-DD') }}
            </template>
          </el-table-column>

          <el-table-column prop="tags" label="标签" align="center">
            <template #default="scope">
              <el-tag
                v-for="(tag, index) in scope.row.tags.slice(0, 3)"
                :key="tag"
                size="large"
                :type="types[index % 3]"
                effect="plain"
                class="tag"
                >{{ tag }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="toQuestionPage(scope.row)"
                >查看
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pager-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="searchParams.pageSize"
          :currentPage="searchParams.pageNum"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.table-main {
  width: 80%;
  margin: 20px auto;
  padding: 10px;
}

.el-table {
  text-align: center;
}

.pager-wrapper {
  margin-top: 20px;
  float: right;
}

//.tag {
//  margin-right: 5px;
//}

.tag {
  margin-right: 10px;
  margin-bottom: 5px;
}

.inputVisible {
  margin-top: 10px;
}

.search-form {
  min-height: 60px;
}
</style>
